<template>
  <div class="completed-wrapper">

    <div class="prompt-con">
      <img src="../../../static/images/check/prompt.png">
      <span>长按屏幕保存到手机，发送到电脑上可直接打印。</span>
    </div>

    <div class="prove-con">
      <h4>成都市入学查验证明</h4>
      <div class="txt">
        <p>儿童姓名:王菲月<span>性别:男</span></p>
        <p>生日:2018-03-23<span>年龄:1岁10月</span></p>
        <p>儿童接种编码:2323124214</p>
      </div>
    </div>

    <div class="unit-con">
      <p><span>接种单位：</span>成都市高新区社区服务中心</p>
      <p><span>查验结果：</span>
        经查验，该儿童当前年龄已按国家免
        疫规划程序完成接种。凭次本通知与接种证办理
        相关入学手续，如接种证丢失请到接种单位补办。</p>
      <div class="right">
        <p>查验日期: 2019.03.23</p>
        <p>家长手机:</p>
        <p>家长签名:</p>
      </div>
    </div>

  </div>
</template>

<script>
  import html2canvas from 'html2canvas'

    export default {
        name: "completed",
        metaInfo () {
          return {
            title: '已完成接种查验'
          }
        },
        data(){
          return {
            downImg:''
          }
        },
      mounted(){

      },
        methods:{
          download(){
            var this1=this;
            setTimeout(function () {
              html2canvas(this1.$refs.mine,{
                backgroundColor: null
              }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png");
                this1.downImg=dataURL;
                console.log(dataURL)
              });

            },0)
          }
        }
    }
</script>

<style lang="scss">
  .completed-wrapper{
    padding:20px 30px 0;
    background: #ffffff;
    .prompt-con{
      height:22px;
      background:rgba(253,247,224,1);
      padding:5px 15px;
      img{
        width:13px;
        height: 13px;
        vertical-align: middle;
      }
      span{
        font-size:12px;
        font-family:PingFang-SC-Regular;
        font-weight:bold;
        color:rgba(255,180,0,1);
      }
    }
    .prove-con{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
      border-radius:10px;
      margin-top: 10px;
      padding:15px 0;
      h4{
        font-size:18px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
        text-align: center;
        border-bottom: 1px solid rgba(242,242,242,1);
        padding-bottom: 12px;
      }
      .txt{
        padding:15px 15px 0;
        p{
          height:13px;
          font-size:14px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
          zoom: 1;
          margin-bottom: 15px;
          &:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
          span{
            float: right;
          }
        }
      }
    }
    .unit-con{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
      border-radius:10px;
      padding:15px;
      margin-top:10px;
      zoom: 1;
      &:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      p{
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
        margin-bottom: 15px;
        line-height: 18px;
      }
      .right{
        width:156px;
        float: right;
      }
    }
  }
</style>
